<template>
	<view class="logistics">
		<view class="query">
			<view class="h_30 font_38">
				{{userInfo.nickname}} - {{userInfo.mobile}}
			</view>
			<view class="h_30">
				职称：{{userInfo.identity_name}}
			</view>
		</view>
		<view class="content m_26">
			<view v-for="(item, index) in areaList" :key="index" class="content-item"
				:style="{backgroundImage:`url(${item.bg})`}" @click="jump(item.url)">
				<view class="row">
					<view class="row-value">{{ item.title }}</view>
				</view>
			</view>
			<view class="content-item2"
				v-if="userInfo.identity == 6 ||userInfo.identity == 1||userInfo.identity == 2"
				v-for="(item, index) in lastList" :key="index" :style="{backgroundImage:`url(${item.bg})`}"
				@click="jump(item.url)">
				<view class="row">
					<view class="row-value">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/request/baseUrl.js'
	export default {
		data() {
			return {
				baseUrl: baseUrl,
				areaList: [{
					title: '提成记录',
					url: '/pages/index/extraRecord',
					bg: require('../../static/bg_1.png'),
				}, {
					title: '我的工单',
					url: '/pages/index/myOrder',
					bg: require('../../static/bg_4.png'),
				}, {
					title: '我的报销',
					url: '/pages/index/myClaim',
					bg: require('../../static/bg_2.png'),
				}],
				lastList: [{
					title: '设备运行环境监控',
					url: '/pages/index/environment',
					bg: require('../../static/bg_5.png'),
				}],
				userInfo: {}
			};
		},
		onLoad(e) {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo, '===========')

			if (this.userInfo.identity != 2) {
				this.areaList.push({
					title: '配件管理',
					url: '/pages/index/accessory',
					bg: require('../../static/bg_3.png'),
				})
			}
		},
		onShow() {


		},
		methods: {
			// 预览图片
			preview(current, urls) {
				uni.previewImage({
					current,
					urls,
				});
			},

			// 新增物流
			handleAdd() {
				uni.navigateTo({
					url: "/pages/logistics/addLogistics"
				});
			},
			jump(url) {
				uni.navigateTo({
					url,
				})
			}


		},

	};
</script>

<style lang="scss" scoped>
	.logistics {
		background-color: #f7f8fb;
		min-height: 100vh;

		.query {
			width: 100%;
			background: url(../../static/index/bgc-card3.png);
			background-size: 100% 100%;
			position: sticky;
			color: #fff;
			height: 120rpx;
			font-size: 30rpx;
			padding: 50rpx 40rpx;
		}

		.content {
			background-color: #fff;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			flex-wrap: wrap;
			padding: 14rpx;

			&-item,
			&-item2 {
				width: 46.4%;
				height: 192rpx;
				border-radius: 20rpx;
				padding: 26rpx 36rpx;
				margin: 12rpx;
				position: relative;
				overflow: hidden;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				box-sizing: border-box;

				.row {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					justify-content: space-between;
					font-family: Source Han Sans CN, Source Han Sans CN;
					color: #000000;
				}
			}

			&-item2 {
				width: 96.4%;
			}
		}
	}
</style>